<template>
  <div>
    <van-popup v-model="show" position="bottom">
      <div class="a-body">
        <div class="ab-top">
          <svg aria-hidden="true" class="close" @click="close">
            <use xlink:href="#icon-gb"></use>
          </svg>
          <img :src=pic>
          <div class="price"><span>￥</span>{{price}}</div>
        </div>
        <div class="attr-b" v-for="(item, goodIndex, key) in good.norm_format" :key="key">
          <h6>{{item.name}}</h6>
          <div class="attrs">
            <div
              class="attr"
              v-for="(data, attrIndex, ke1) in item.list"
              :key="ke1"
              :class="{active:select[item.name] === data.value}"
              @click=choose(data.value,goodIndex,attrIndex)
            >{{data.value}}
            </div>
          </div>
        </div>
        <div class="btn-reverse" @click="add">确认</div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Popup, Toast} from 'vant';
  import Vue from 'vue';
  import NumControl from '../cart/numControl.vue';

  Vue.use(Popup);
  export default {
    components: {NumControl, Toast},
    name: 'chooseAttr',

    data() {
      return {
        select: {},
        normId: ''
      };
    },
    props: {},
    created() {
    },
    methods: {
      getNum(data) {
        this[data.type + 'Goods'].forEach(function (item) {
          if (data.id === item.attr.id) {
            item.num = data.num;
          }
        });
      },
      close() {
        this.select = {};
        this.$store.commit('goodAttr', {});
        this.$store.commit('showAttr', false);
        this.$store.commit('region', '');
      },
      nowBuy() {
        let arr = [];
        for (let i in this.select) {
          let sing = {};
          sing.name = i;
          sing.value = this.select[i];
          arr.push(sing);
        }
        let reg = {};
        if (this.$store.state.sale.region === '2188') {
          reg = {
            id: '2188',
            title: '礼包'
          };
        } else if (this.$store.state.sale.region === '3488') {
          reg = {
            id: '3488',
            title: '兑换'
          };
        } else {
          reg = this.$store.state.sale.rArea;
        }
        let selectGoods = [
          {
            region: reg,
            list: [
              {
                num: 1,
                product: {
                  title: this.good.name,
                  norm_id: this.normId,
                  price: this.price,
                  id: this.good.id,
                  pic: this.pic,
                  detail: arr
                }
              }
            ]
          }
        ];
        this.$store.commit('changeSelectGoods', selectGoods);
        this.$store.commit('goodAttr', {});
        this.$store.commit('showAttr', false);
        this.$store.commit('region', '');
        this.$store.commit('nowBuy', 0);
        this.select = {};
        this.$router.push('order-detail');
      },
      add() {
        if (this.normId === '') {
          Toast('还有属性没有选中哦');
        } else {
          let good = {
            productId: this.good.id,
            region: this.$store.state.sale.region,
            normId: this.normId
          };
          if (this.$store.state.sale.nowBuy === 0) {
            if (this.$store.state.sale.region === '2188') {
              this.nowBuy();
            } else if (this.$store.state.sale.region === '3488') {
              this.nowBuy();
            } else {
              this.$Sale.cart('add', good).then(res => {
                this.$store.commit('goodAttr', {});
                this.$store.commit('showAttr', false);
                this.$store.commit('region', '');
                Toast('加入购物车成功');
                this.select = {};
              }, () => {
              });
            }
          } else {
            this.nowBuy();
          }
        }
      },
      choose(str, goodIndex, attrIndex) {
        let className = this.good.norm_format[goodIndex].name;
        this.$set(this.select, className, str);
        let arr = Object.keys(this.select);
        let isOk = true;
        let that = this;
        let pic;
        let price;
        let select = this.select;
        if (this.good.norm_format.length === arr.length) {
          this.good.norms.forEach((data) => {
            isOk = true;
            for (let i in data.detail) {
              for (let j in select) {
                if (data.detail[i].name === j) {
                  if (data.detail[i].value === select[j]) {
                    continue;
                  } else {
                    isOk = false;
                    break;
                  }
                }
              }
            }
            if (isOk) {
              that.normId = data.id;
              pic = data.pic;
              price = data.price;
              return false;
              // 匹配成功
            } else {
              // 匹配失败
            }
          });
          this.pic = pic;
          this.price = price;
        }
      }
    },
    mounted() {
    },
    computed: {
      show: {
        get: function () {
          return this.$store.state.sale.showAttr;
        },
        set: function () {
        }
      },
      good() {
        return this.$store.state.sale.goodAttr;
      },
      price: {
        get: function () {
          return this.$store.state.sale.goodAttr.price;
        },
        set: function (value) {
          this.$store.state.sale.goodAttr.price = value;
        }
      },
      pic: {
        get: function () {
          return this.$store.state.sale.goodAttr.pic;
        },
        set: function (value) {
          this.$store.state.sale.goodAttr.pic = value;
        }
      }
    },
    watch: {
      show(value) {
        if (value) {
          let sing = {};
          this.good.norms[0].detail.forEach((data) => {
            sing[data.name] = data.value;
          });
          this.select = sing;
          this.price = this.good.norms[0].price;
          this.pic = this.good.norms[0].pic;
          this.normId = this.good.norms[0].id;
        } else {
          this.select = {};
        }
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .van-popup
    border-top-left-radius: vw(5);
    border-top-right-radius: vw(5);
    top 15%

  .a-body
    position relative
    padding vw(15) vw(15) vw(50)
    border-radius vw(5)
    text-align center
    .close
      width vw(20)
      height vw(20)
      fill #000
      position absolute
      top vw(20)
      left 92vw
    img
      width vw(120)
      height vw(120)
      border-radius vw(5)
    .price
      font-size vw(18)
      color main-color
      margin-top vw(10)
      span
        font-size vw(12)
    .attr-b
      text-align left
      margin-top vw(20)
      margin-bottom vw(20)
      h6
        font-size vw(14)
        color #333
      .attrs
        display flex
        flex-wrap wrap
        margin-top vw(10)
        .attr
          background-color #f5f5f5
          padding 0 vw(10)
          height vw(25)
          line-height vw(25)
          border-radius vw(20)
          font-size vw(12)
          color #999
          margin-right vw(10)
          margin-top vw(10)
        .active
          color main-color
    .num
      display flex
      justify-content space-between
      margin-top vw(30)
      font-size vw(14)
      color #333
    .btn-reverse
      width vw(120)
      position absolute
      bottom vw(5)
      left 50%
      margin-left vw(-60)
      height vw(40)
      line-height vw(40)
      text-align center
      border-radius vw(20)
      font-size word16
      background main-color
      color #fff
      box-sizing border-box
</style>
